<!-- 参考自： https://codepen.io/bosworthco/pen/YWBLpR -->
<template>
  <div class="textHover">
    <ul class="Words">
      <!-- <li class="Words-line">
        <p>&nbsp;</p>
        <p>CSS Only</p>
      </li>
      <li class="Words-line">
        <p>CSS Only</p>
        <p>Perspective</p>
      </li>
      <li class="Words-line">
        <p>Perspective</p>
        <p>Text Effect</p>
      </li>
      <li class="Words-line">
        <p>Text Effect</p>
        <p>by</p>
      </li>
      <li class="Words-line">
        <p>by</p>
        <p>James</p>
      </li>
      <li class="Words-line">
        <p>James</p>
        <p>Bosworth</p>
      </li>
      <li class="Words-line">
        <p>Bosworth</p>
        <p>&nbsp;</p>
      </li> -->
      <li class="Words-line" v-for="item, index in props.content" :key="index">

        <p v-if="index == 0">&nbsp;</p>
        <p v-else>{{ item }}</p>
        <!-- <p>{{ item }}</p> -->
        <p v-if="index == props.content.length - 1">&nbsp;</p>
        <p v-else>{{ props.content[index + 1] }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
// const defaultContent = ['第一句╰(*°▽°*)╯','第二句(*/ω＼*)','第三句ಥ_ಥ','第四句( ´･･)ﾉ(._.`)','第五句(^///^)'];
var props = defineProps({
  text: {
    type: String,
    default: '\r\n第一句╰(*°▽°*)╯\r\n第二句(*/ω＼*)\r\n第三句ಥ_ಥ\r\n第四句( ´･･)ﾉ(._.`)\r\n第五句(^///^)'
  },
  content: {
    type: Array,
    default: () => []
  }
})



</script>

<style lang="scss" scoped>
/* 
** Change this if you need to modify
** the amount of lines displayed
*/
$total-lines: 6;


/*
** Leave these unless you want
** to open a whole can of worms
*/
$left-offset: 29px;
$clip-height: 50px;
$line-height: $clip-height - 5px;


/*
** Set up the experiment
*/
// html {
//   background-color: #5138BE;
//   height: 100%;
// }

.textHover {
  //   color: #FFFFFF;
  display: flex;
}


/*
** Apply styles to the parent element
*/
.Words {
  margin: 0 auto;
  padding: 80px 0;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  // Sort out nasty text fuzz
  transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  // -webkit-font-kerning: normal;
  -webkit-text-size-adjust: 100%;
}


/*
** Apply common styles to each line of text
*/
.Words-line {
  height: $clip-height;
  overflow: hidden;
  position: relative;

  // Change the perspective of each alternating line
  &:nth-child(odd) {
    transform: skew(60deg, -30deg) scaleY(.66667);
  }

  &:nth-child(even) {
    transform: skew(0deg, -30deg) scaleY(1.33333);
  }

  // Loop over the total lines and apply a left offset
  @for $i from 1 through $total-lines+1 {
    &:nth-child(#{$i}) {
      left: $left-offset * $i;
    }
  }
}


/*
** Fine-grained text styles
*/
p {
  height: $clip-height;
  line-height: $line-height;
  padding: 0 10px;
  transition: all .4s ease-in-out;
  transform: translate3d(0, 0, 0);
  vertical-align: top;
  white-space: nowrap;
}


/*
** The hover interaction
*/
.Words:hover {
  p {
    transform: translate3d(0, -($clip-height), 0);
  }
}
</style>